<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>玩家自制</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/program.css">
    <style>
        #goTop{
            display:block;
            width:60px;
            height:60px;
            position:fixed;
            bottom:20px;
            right:20px;
            border-radius:10px 10px 10px 10px;
            text-decoration:none;
            display:none;
            background-color:#999999;
        }
        #goTop span{
            display:block;
            width:60px;
            color:#dddddd;
        }
        #goTop span:hover{
            color:#cccccc;
        }
        #goTop span{
            font-size:40px;
            text-align:center;
            margin-top:0px;
        }

    </style>
</head>

<body>
<div class="wrapper">
    <jsp:include page="./leftSidebar.jsp"></jsp:include>
    <div class="aside">
        <div class="widgets">
            <h4>搜索</h4>
            <div class="body search">
                <form action="search.jsp">
                    <input type="text" class="keys" id="keys" placeholder="输入关键字">
                    <input type="button" class="btn" id="SearchBtn" value="搜索">
                </form>
            </div>
        </div>
        <div class="widgets">
            <h4>随机推荐</h4>
            <ul class="body random">
                <li>
                    <a href="javascript:;">
                        <p class="title">TV动画《满溢的水果挞将于2020年10月播出。</p>
                        <p class="reading">阅读(819)</p>
                        <div class="pic">
                            <img src="../uploads/right1.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="title">TV动画《EX-ARM》于2021年1月10日播出</p>
                        <p class="reading">阅读(906)</p>
                        <div class="pic">
                            <img src="../uploads/right2.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="title">手游《Fate/Grand》配信5周年纪念动画PV公开</p>
                        <p class="reading">阅读(509)</p>
                        <div class="pic">
                            <img src="../uploads/right3.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="title">芳文社漫画改编动画《满溢的水果塔》追加声优</p>
                        <p class="reading">阅读(679)</p>
                        <div class="pic">
                            <img src="../uploads/right4.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="title">TV动画《天使与龙的轮舞》将推出蓝光BOX。</p>
                        <p class="reading">阅读(889)</p>
                        <div class="pic">
                            <img src="../uploads/right5.jpg" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="panel hots content11">
            <div class="row" style="height: 50px">
                <div class="col-sm-4" style="height: 50px">
                    <h3 style="margin-top: 0">玩家自制</h3>
                </div>
                <div class="col-sm-7" style="height: 50px">
                </div>
                <div class="col-sm-1" style="height: 50px">
                </div>
            </div>

        </div>
    </div>
    <%--  回到顶部  --%>
    <a href="#"  id="goTop" >
        <span >▲</span>
    </a>
</div>
<script src="../bootstrap/js/jquery/jquery.js"></script>
<script src="../bootstrap/js/nprogress/nprogress.js"></script>
<script type="text/javascript">
    $(function () {
        $('#SearchBtn').click(function () {
            var keys = $('#keys').val().trim();
            location.href = './search.do?action=page&name=' + keys;
        })
    })
</script>
<script>
    $(function(){
        var count = 210;
        var page = 1;
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >200){  //判断滚动后高度超过200px,就显示
                $("#goTop").fadeIn(0); //淡出
            }else{
                $("#goTop").stop().fadeOut(0); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
            }
            // 当前页面行数少于总行数  并且滑轮到一定距离
            if (page<=window.Total && scrollt>=count){
                console.log(window.Total)
                $.ajax({
                    url : "./user.do",
                    type : "get",
                    data : {action : "pulleyVideo",videoType:"2",pageNo : page},
                    success : function (data) {
                        var htmlText= '<ul style="margin-bottom: 30px; border-bottom: solid 2px #e4e4e4; cursor:pointer;height: 184px;width: 868px">';
                        for (var i = 0; i < (data.items).length; i++){
                            console.log(i)
                            var video = data.items[i];
                            //在最底部插入视频
                            htmlText+='<li><a href="./video.jsp?videoUrl='+video.url+'&videoImg='+video.videoImg+'&videoId='+video.id+'&name='+video.name+'&describe='+video.describe +'"'+
                                '><img src="/fantasy/videoUpload/'+video.videoImg+'"'+
                                ' alt=""><span>'+
                                video.name +
                                '</span></a></li>'
                        }
                        htmlText+="</ul>";
                        $(".content11").append(htmlText);
                    }

                })
                page +=1;
                count +=210;
                //如果达到了最后一行输出提醒 并对page在此进行++ 停止滚轮事件
            }else if (page===window.Total+1){
                $(".content11").append("<span style='margin-left: 380px'>到底了<span>")
                page+=1;
            }
            console.log(page)

        });
        $("#goTop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);

        });
        //在页面最初 插入4行视频
        for (let j = 0; j <4 ; j++) {
            $.ajax({
                url : "./user.do",
                type : "get",
                data : {action : "pulleyVideo",videoType:"2",pageNo : page},
                success : function (data) {
                    (function (win) {
                        //js是一门动态类型的语言,对象没有属性,点了就有了
                        win.Total = data.pageTotal;
                    })(window);

                    var htmlText= '<ul style="margin-bottom: 30px; border-bottom: solid 2px #e4e4e4; cursor:pointer;height: 184px;width: 868px">';
                    for (var i = 0; i < (data.items).length; i++){
                        var video = data.items[i];
                        htmlText+='<li><a href="./video.jsp?videoUrl='+video.url+'&videoImg='+video.videoImg+'&videoId='+video.id+'&name='+video.name+'&describe='+video.describe +'"'+
                            '><img src="/fantasy/videoUpload/'+video.videoImg+'"'+
                            ' alt=""><span>'+
                            video.name +
                            '</span></a></li>'
                    }
                    htmlText+="</ul>";
                    $(".content11").append(htmlText);
                }

            })
            page+=1;
        }
    });
</script>
</body>

</html>